<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试题(每日一遍)</title>
    <style>
        #sjx1{
            width: 0;
            height: 0;
            border-top: 200px solid greenyellow;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid transparent;
        }
        #sjx2{
            width: 200px;
            height: 200px;
            background: linear-gradient(45deg,greenyellow 50%,transparent 50%);
        }
        #sjx3{
            font-size: 100px;
        }
        #sx1{
            width: 200px;
            height: 200px;
            border-radius: 200px 0 0;
            background-color: greenyellow;
        }
        #sx2{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: linear-gradient(90deg,greenyellow 50%,transparent 50%);
        }
    </style>
</head>
<body>
    <div id="sjx1">三角形1</div>
    <div id="sjx2">三角形2</div>
    <div id="sjx3">&#9660;</div>
    <div id="sx1">扇形1</div>
    <div id="sx2">扇形2</div>
    <button onclick="startjl()">节流</button>
    <button onclick="startfd()">防抖</button>
    <script>
        /**
         * 节流与防抖
         */
        function jieliu(time,fun){
            console.log("节流进来....")
            let thetime=null;
            return function(){
                if(thetime)return;//如果不为空就不往下执行
                thetime=setTimeout(() => {
                    fun();//执行该函数
                    clearTimeout(thetime);//清除定时器
                    thetime=null;//赋值为空    
                }, time);
            }
        }
        function fangdou(time,fun){
            let thetime=null;
            return function(){
                clearTimeout(thetime);//清除
                thetime=null;//调用就赋值为null
                if(thetime)return;//不为空则不往下执行
                thetime=setTimeout(()=>{
                    fun();//执行函数
                    //执行完了清除并且赋值为null
                    clearTimeout(thetime);
                    thetime=null;
                },time)
            }
        }
        let myjieliu=jieliu(2*1000,()=>console.log("hello,我是节流"));
        let myfangdou=fangdou(2*1000,()=>console.log("hello,我是防抖"));
        //两个按钮调用
        function startjl(){
            myjieliu()
        }
        function startfd(){
            myfangdou()
        }

        /**
         * 扁平化
         * 将二维数组转为一维数组
         */
        function bph1(arr){
            return arr.join(",").split(",");
        }
        function bph2(arr){
            return arr.toString().split(",");
        }
        function bph3(){
            let newarr=[];
            return function aegin(arr1){
                let thenewarr=arr1.map(item=>{
                    if(typeof item==="object"){
                        aegin(item)
                    }else{
                        newarr.push(item)
                    }
                    return newarr;
                })
                return thenewarr[0];
            }
        }
        console.log("-------下方是扁平化-------")
        console.log(bph1([1,23,123,[123,222,51]]))
        console.log(bph2([1,23,123,[123,222,51]]))
        console.log(bph3()([1,23,123,[123,222,51]]))
        /**
         * 柯里化
         */
        console.log("-------下方是柯里化-------")
        function klh(){
            //将arguments转换为标准数组
            let arg=Array.prototype.slice.call(arguments);
            let inner=function(){
                arg.push(...arguments)
                return inner;
            }
            inner.toString=function(){
                return arg.reduce((prev,cur)=>{
                    return prev+cur;
                })
            }
            return inner;
        }
        console.log(parseInt(klh(1)(2)(3)))
        /**
         * Promise
         */
         console.log("-------下方是Promise-------")
        let test1=function(){
            return new Promise((resolve,reject)=>{
                setTimeout(() => {
                    resolve("测试1成功")
                }, 2000);
            })
        }
        let test2=function(){
            return new Promise((resolve,reject)=>{
                setTimeout(() => {
                    resolve("测试2成功")
                }, 1000);
            })
        }
        let test3=function(){
            return new Promise((resolve,reject)=>{
                setTimeout(() => {
                    resolve("测试3成功")
                }, 3000);
            })
        }
        //基本测试
        test1().then(res=>{
            console.log("基本测试",res)
        })
        Promise.myrace=function(arg){
            return new Promise((resolve,reject)=>{
                for(let i=0;i<arg.length;i++){
                    arg[i].then(res=>{
                        resolve(res)
                    })
                }
            })
        }
        Promise.myrace([test1(),test2(),test3()]).then(res=>{
            console.log("race方法编写成功",res)
        })
        //all方法
        Promise.myall=function(arg){
            let count=0;
            let arr=new Array();
            return new Promise((resolve,reject)=>{
                arg.forEach((item,i)=> {
                    Promise.resolve(item).then(res=>{
                        arr[i]=res;
                        count++;
                        if(count===arg.length){
                            resolve(arr)
                        }
                    }).catch((err)=>{reject(err)})
                });
            })
        }
        Promise.myall([test1(),test3(),test2()]).then(res=>{
            console.log("all方法编写成功",res)
        })
    </script>
</body>
</html>